import {
  Row,
  Col,
  Form,
  Input,
  Select,
  Modal,
} from 'antd';

const FormItem = Form.Item;
const { Option } = Select;



//新增表单
const CreateForm = Form.create()(props => {
  const { modalVisible, form, handleAdd, handleModalVisible } = props;
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleAdd(fieldsValue);
    });
  };
  return (
    <Modal
width={800}
height={800}
destroyOnClose
title="新增"
visible={modalVisible}
onOk={okHandle}
onCancel={() => handleModalVisible()}
>
<Form  layout="vertical">

    <Row gutter={{ md: 8, lg: 24, xl: 48 }}>



        <Col  md={12} sm={24}>
		        <FormItem  label="地区名称">
		            {form.getFieldDecorator('name', {
		            rules: [{ required: true, message: '请输入地区名称！', min: 1 }],
		            })(<Input placeholder="请输入" />)}
		        </FormItem>
        </Col>



        
        <Col  md={12} sm={24}>
		        <FormItem  label="地区级别">
		            {form.getFieldDecorator('levels', {
		            rules: [{ required: true, message: '请选择级别！'}],
		            })(
							    <Select placeholder="请选择" style={{ width: '100%' }}>
											<Option value="1">一级</Option>
											<Option value="2">二级</Option>
											<Option value="3">三级</Option>
											<Option value="4">四级</Option>
					        </Select>
							)}
		        </FormItem>
        </Col>


    </Row>



</Form>
</Modal>
  );
});

export default CreateForm;
